<template>
    <el-form  :model="cate" label-width="120px" :rules="rules" ref="cateAdd">
      <el-form-item label="分类名称" prop="cateName">
        <el-input v-model="cate.cateName" />
      </el-form-item>
      <el-form-item label="父级分类" prop="pid">
        <el-cascader v-model="cate.pid" :options="pCates" :props="{
        checkStrictly: true,
        label: 'cateName',
        emitPath: false,   // 设置为false，请求时返回的pid就不是数组
        value: 'id'
      }" clearable />
      </el-form-item>
      <el-form-item label="是否启用" prop="enable">
        <el-switch v-model="cate.enable" inline-prompt active-text="是" inactive-text="否" />
      </el-form-item>
      <el-form-item label="上传图片" >
      <!-- 图片上传部分 -->
      <el-upload
      name="file"
      action="/api/upload"
      list-type="picture-card"
      :auto-upload="false"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      limit=9>
      <el-icon><Plus /></el-icon>

      <template #file="{ file }">
          <img class="el-upload-list__item-thumbnail"  :src="file.url" alt="" />
      </template>
    </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">修改</el-button>
        <el-button @click="restForm">放弃</el-button>
      </el-form-item>
    </el-form>
</template>

<script>
import { fetchCateDetail, updateCate } from '@/api/cateList'
export default {
  props: {
    cates: {
      type: Array,
      required: true
    },
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      rules: {
        cateName: [
          {
            required: true,
            message: '必填'
          }
        ],
        pid: [
          {
            required: true,
            message: '必选'
          }
        ],
        enable: [
          {
            required: true,
            message: '必选'
          }
        ]
      },
      cate: {
        cateName: '',
        cateIcon: '',
        enable: true,
        pid: -1
      },
      pCates: [
        {
          id: -1,
          cateName: '顶层分类'
        }
      ]
    }
  },
  watch: {
    cates: {
      handler (newVal) {
        this.pCates = [
          ...this.pCates,
          ...newVal
        ]
      },
      deep: true,
      immediate: true
    },
    id: {
      handler (newVal) {
        fetchCateDetail(newVal).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            this.cate = res.data.data
          }
        })
      },
      immediate: true
    }
  },
  methods: {
    beforeUpload (file) {
      if (file.size > 10 * 1024 * 1024) {
        alert('文件太大了')
        return false
      } else {
        return true
      }
    },
    onSuccess (res) {
      if (res.code === 200) {
        this.cate.cateIcon = res.data.url
        this.$message({
          type: 'success',
          message: res.msg
        })
      }
    },
    onSubmit () {
      // console.log(this.cate)
      // ref获取dom对象
      this.$refs.cateAdd.validate().then(() => {
        updateCate(this.cate).then(res => {
          if (res.data.code === 200) {
            //
            this.$message({
              // 也可以用ElMessage
              type: 'success',
              message: res.data.msg, // 内容
              duration: 1000,
              onClose: () => {
                // 刷新
                this.$router.go(0)
              }
            })
          }
        })
      }).catch(() => {
        alert('验证失败')
      })
    },
    restForm () {
      // 重置的前提是必须要加prop对应字段名
      this.$refs.cateAdd.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
